<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Home</title>
    <style>

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .tabs {
            overflow: hidden;
            border-bottom: 1px solid #ccc;
        }
        .tab {
            float: left;
            cursor: pointer;
            padding: 10px 20px;
            transition: background-color 0.3s;
        }
        .tab:hover {
            background-color: #f4f4f4;
        }
        .tab-content {
            display: none;
            padding: 20px;
        }
        .active {
            display: block;
        }
        .sidebar {
            float: left;
            width: 200px;
            height: 100%;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .submenu {
            display: none;
        }
        .submenu.active {
            display: block;
        }
        .submenu li {
            list-style-type: none;
            cursor: pointer;
            padding: 5px 0;
        }
        .submenu li:hover {
            background-color: #e6e6e6;
        }
        .homework-item {
            cursor: pointer;
            padding: 5px 0;
        }
        .homework-item:hover {
            background-color: #e6e6e6;
        }
        .feedback-item {
            cursor: pointer;
            padding: 5px 0;
        }
        .feedback-item:hover {
            background-color: #e6e6e6;
        }
    </style>
</head>
<body>

<div class="tabs">
    <div class="tab" onclick="openTab(event, 'course')">Course</div>
    <div class="tab" onclick="openTab(event, 'deadline')">Deadline</div>
    <div class="tab" onclick="openTab(event, 'feedback')">Feedback</div>
</div>

<div id="course" class="tab-content">
    <div class="sidebar">
        <h3>Menu</h3>
        <ul>
            <li onclick="toggleSubMenu()">Register Course</li>
            <li onclick="toggleSubMenu()">Existing Courses</li>
            <ul class="submenu">
                <li>Course 1</li>
                <li>Course 2</li>
                <li>Course 3</li>
            </ul>
        </ul>
    </div>
    <div class="content">
        <!-- Course Content -->
    </div>
</div>

<div id="deadline" class="tab-content">
    <h2>Homework List</h2>
    <ul id="homework-list">
        <li class="homework-item" onclick="submitHomework()">Homework 1</li>
        <li class="homework-item" onclick="submitHomework()">Homework 2</li>
        <li class="homework-item" onclick="submitHomework()">Homework 3</li>
    </ul>
</div>

<div id="feedback" class="tab-content">
    <h2>Feedback List</h2>
    <ul id="feedback-list">
        <li class="feedback-item" onclick="viewFeedback()">Feedback 1</li>
        <li class="feedback-item" onclick="viewFeedback()">Feedback 2</li>
        <li class="feedback-item" onclick="viewFeedback()">Feedback 3</li>
    </ul>
</div>

<script type="module">
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tab-content");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tab");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }

    function toggleSubMenu() {
        var submenu = document.querySelector('.submenu');
        submenu.classList.toggle('active');
    }

    function submitHomework() {
        window.location.href = 'S_submit_homework.html';
    }

    function viewFeedback() {

        window.location.href = 'S_view_feedback.html';
    }
</script>

</body>
</html>